/**
 * 标题设置
 */
function scTitleSetting(opt){
    var com = scCommon.instance();
    var crEle = com.crEle;

    var list = [
        {label: "正文", subLabel: "Text", value: "title", code: "Text", style: {
            fontWeight: "normal"
        }},
        {label: "标题1", subLabel: "H1", value: "title", code: "H1", style: {
            fontSize: 16, fontWeight: "bold"
        }},
        {label: "标题2", subLabel: "H2", value: "title", code: "H2", style: {
            fontSize: 15, fontWeight: "bold"
        }},
        {label: "标题3", subLabel: "H3", value: "title", code: "H3", style: {
            fontSize: 14, fontWeight: "bold"
        }},
        {label: "标题4", subLabel: "H4", value: "title", code: "H4", style: {
            fontSize: 13, fontWeight: "bold"
        }},
        {label: "标题5", subLabel: "H5", value: "title", code: "H5", style: {
            fontSize: 12, fontWeight: "bold"
        }},
        {label: "标题6", subLabel: "H6", value: "title", code: "H6", style: {
            fontSize: 11, fontWeight: "bold"
        }},
        {label: "标题", subLabel: "Title", value: "title", code: "Title", style: {
            fontSize: 16, fontWeight: "bold"
        }},
        {label: "副标题", subLabel: "Sub", value: "title", code: "Sub", style: {
            fontSize: 15, fontWeight: "bold"
        }},
    ];

    var box = null;
    var isActive = false;
    var listener = null;
    var lastLi = null;

    this.createView = function(option){
        option = option ? option : {};
        listener = option.listener;

        box = crEle("div", "sc-title-setting");

        let ul = crEle("ul", "sc-title-ul");
        
        let item = null;
        for(let i in list){
            item = list[i];

            let li = crEle("li", "sc-title-li");
            let label = crEle("div", "sc-title-label");
            label.innerText = item.label;

            let subLabel = crEle("div", "sc-title-sub-label");
            subLabel.innerText = item.subLabel;

            li.appendChild(label);
            li.appendChild(subLabel);

            item.element = li;

            ul.appendChild(li);

            li.addEventListener("click", (e)=>{
                let item = list.find(it=>it.element === e.currentTarget);
                listener["click"][0]("setTitle", {
                    type: item.code,
                    style: {...item.style}
                });
                switchEffect(e.currentTarget, lastLi);
                e.stopPropagation();
            });
        }

        let arrow = crEle("div", "sc-title-arrow");
        let img = crEle("img");

        img.src = scToolbarResource.arrowDown;
        arrow.appendChild(img);

        arrow.addEventListener("click", (e)=>{
            setBoxActive();
        });

        box.appendChild(arrow);
        box.appendChild(ul);

        return box;
    }

    /**
     * 切换点击效果
     * @param {*} li 
     * @param {*} lastli 
     */
    var switchEffect = function(li, lastli){
        if(lastli){
            lastli.classList.remove("active");
        }
        li.classList.add("active");

        lastLi = li;
    }

    /**
     * 设置盒子是否激活
     */
    var setBoxActive = function(flg){
        if(flg === false){
           box.classList.remove("active");
           isActive = false;
           return;
        }
        
        if(isActive){
            box.classList.remove("active");
        }else{
            box.classList.add("active");
        }
        isActive = !isActive;
    }

    /**
     * 通知
     * @param {*} eventType 
     * @param {*} param 
     */
    this.notify = function (eventType, param) {
        if(eventType == "mousedown"){
            setBoxActive(false);
        }
    }
}